..<template>
  <div>
    <!-- 筛选 -->
    <div style="float: left;display: flex;margin-bottom: 10px;">
      <el-input
        @clear="initProcessesRelate"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入流程定义名称"
        class="initProcessesRelate"
        v-model="relatePage.processDefinitionName"
        @keydown.enter.native="initProcessesRelateQuery">
      </el-input>
      <el-input
        @clear="initProcessesRelate"
        clearable
        style="margin-left: 8px;"
        prefix-icon="el-icon-search"
        placeholder="请输入流程定义key"
        class="initProcessesRelate"
        v-model="relatePage.processDefinitionKey"
        @keydown.enter.native="initProcessesRelateQuery">
      </el-input>
      <el-input
        @clear="initProcessesRelate"
        clearable
        style="margin-left: 8px;"
        prefix-icon="el-icon-search"
        placeholder="请输入流程定义版本"
        class="initProcessesRelate"
        v-model="relatePage.processDefinitionVersion"
        @keydown.enter.native="initProcessesRelateQuery">
      </el-input>
      <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initProcessesRelateQuery">查询</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end">
      <el-button
        type="primary"
        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
      </el-button>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="RelateList"
          size="small"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column
                        label="流程名称"
                        width="200">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>流程名称: {{ scope.row.processDefinitionName }}</p>
                            <p>实例名称: {{ scope.row.processInstanceName }}</p>
                            <p>流程编码: {{ scope.row.processDefinitionKey }}</p>
                            <p>流程版本: {{ scope.row.processDefinitionVersion }}</p>
                            <p>开始时间: {{scope.row.startTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>结束时间: {{scope.row.endTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <p>流程状态: {{ scope.row.processStatus }}</p>
                            <p>发起者: {{ scope.row.startUserId }}</p>
                            <p>租户编号: {{ scope.row.tenantId }}</p>
                            <p>流程编号: {{ scope.row.processDefinitionId }}</p>
                            <p>业务编号: {{ scope.row.businessKey }}</p>
                            <p>部署编号: {{ scope.row.deploymentId }}</p>
                            <p>删除原因: {{ scope.row.deleteReason }}</p>
                            <p>耗时（毫秒）: {{ scope.row.durationInMillis }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.processDefinitionName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程编码"
                        width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processDefinitionKey }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="实例名称"
                        width="200">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processInstanceName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程版本"
                        width="100">
                    <template slot-scope="scope">
                        <span>V{{ scope.row.processDefinitionVersion }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="流程状态"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.processStatus }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="开始时间" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="结束时间" width="200">
                    <template slot-scope="scope">
                        <span v-if="scope.row.endTime!=null">{{scope.row.endTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="TaskCommentByProcessInstanceId(scope.row)"><i class="el-icon-view"></i>详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
  </div>
</template>

<script>
export default {
 name:"officeProcessesRelate",
 data(){
   return{
    loading: false,
     // 封装查询条件
    relatePage:{
      processDefinitionKey:'',
      processDefinitionName:'',
      processDefinitionVersion:'',
      finishedBeforeDate:'',
      startedAfterDate:'',
      pageNum: 1,
      pageSize: 10
    },
    // 初始化列表
    RelateList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[]
   }
  },
  mounted(){
    // 初始化列表
    this.initProcessesRelateQuery();
  },
 methods:{
      // 详情
     TaskCommentByProcessInstanceId(data){
        this.$router.push({
            path: '/TaskComment',
            // 参数传递
            query: {
                processInstanceId:data.processInstanceId,
                viewPage:'officeProcessesRelate'
            }
        })
     },
   // 重置查询条件
    resetCondition(){
        this.relatePage.processDefinitionKey = '';
        this.relatePage.processDefinitionName = '';
        this.relatePage.processDefinitionVersion = '';
        this.relatePage.finishedBeforeDate = '';
        this.relatePage.startedAfterDate = '';
        this.initProcessesRelateQuery();
    },
    initProcessesRelate(){
      this.initProcessesRelateQuery();
    },
   // 初始化列表
   initProcessesRelateQuery(){
      this.loading = true;
        this.postRequest("/activity/ProcessesRelate/query/ProcessesRelatePageList",this.relatePage).then(resp => {
        this.loading = false;
        if (resp) {
          this.RelateList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
   // 分页
  sizeChange(currentSize) {
    this.relatePage.pageSize = currentSize;
    this.initProcessesRelateQuery();
  },
  currentChange(currentPage) {
    this.relatePage.pageNum = currentPage;
    this.initProcessesRelateQuery();
  }
 }
}
</script>

<style>

</style>
